<template>
    <div class="login-container">
        <div class="layer bg" id="login"></div>
        <div class="layer flex-center">
            <div class="form-group">
                <el-card>
                    <h3 class="title">代理控制台</h3>
                    <el-form v-show="showLogin" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
                             label-position="left" label-width="0px" size="mini"
                             class="card-box login-form">
                        <el-form-item prop="user_name">
                            <el-input name="user_name" v-model.trim="loginForm.user_name" autoComplete="on"
                                      placeholder="请输入账户">
                                <template slot="prepend"><i class="icon iconfont icon-mine_fill"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin"
                                      v-model.trim="loginForm.password" autoComplete="on" placeholder="请输入密码">
                                <template slot="prepend"><i class="icon iconfont icon-lock_fill"></i></template>
                                <template slot="suffix"><span
                                        :class="['show-pwd icon iconfont', close?'icon-browse':'icon-Close']"
                                        @click="showPwd"></span></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="user_vcode">
                            <el-input name="user_vcode" v-model.trim="loginForm.vcode" autoComplete="on"
                                      placeholder="请输入安全码，没有则不填写">
                                <template slot="prepend"><i class="icon iconfont icon-mine_fill"></i></template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="loginbtn" style="width:100%;" :loading="loading"
                                       @click.native="handleLogin">
                                登&nbsp;&nbsp;&nbsp;录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

            </div>
        </div>

    </div>
</template>

<script>
    // require('particles.js')
    // import config from './config/default'
    import {isvalidUsername} from '@/utils/validate'
    import {setVcode} from "../../utils/auth";

    export default {
        name: 'login',
        data() {
            const validateUsername = (rule, value, callback) => {
                if (!isvalidUsername(value)) {
                    callback(new Error('*请输入用户名'))
                } else {
                    callback()
                }
            }
            const validatePass = (rule, value, callback) => {
                if (value) {
                    if (value.length < 5) {
                        callback(new Error('*密码不能小于5位'))
                    } else {
                        callback()
                    }
                }
            }
            const validaterePass = (rule, value, callback) => {
                if (value === this.RegForm.password) {
                    callback()
                } else {
                    callback(new Error('*两次密码不一致'))
                }
            }
            const validateNickname = (rule, value, callback) => {
                if (value) {
                    if (value.length <= 0) {
                        callback(new Error('*请输入正确的昵称'))
                    } else {
                        callback()
                    }
                }
            }
            return {
                loginForm: {
                    user_name: '',
                    password: ''
                },
                close: false,
                RegForm: {},
                loginRules: {
                    user_name: [{required: true, trigger: 'blur', validator: validateUsername}],
                    password: [{required: true, trigger: 'blur', validator: validatePass}]
                },
                loading: false,
                pwdType: 'password',
                showLogin: true,
                showReg: false
            }
        },
        methods: {
            showPwd() {
                if (this.pwdType === 'password') {
                    this.pwdType = ''
                } else {
                    this.pwdType = 'password'
                }
                this.close = !this.close
            },
            toReg() {
                this.showLogin = false
                this.showReg = true
                this.RegForm = {}
            },
            toLogin() {
                this.showLogin = true
                this.showReg = false
                this.loginForm = {}
            },
            handleLogin() {
                // this.$router.push({ path: '/' })
                this.loginForm.data_type = window.location.port == '1103' ? 1 : 2
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        if(!(this.loginForm.vcode == '' || this.loginForm.vcode == undefined)){
                            setVcode(this.loginForm.vcode)
                        }
                        this.loading = true
                        this.$store.dispatch('Login', this.loginForm).then(() => {
                            this.loading = false
                            this.$router.push({path: '/'})
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    $bg: #2d3a4b;
    $dark_gray: #889aa4;
    $light_gray: #eee;

    .login-container {
        position: fixed;
        height: 100%;
        width: 100%;
        background: $bg;

        .el-input-group__prepend {
            padding: 0 0;
        }

        .layer {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        .form-group {
            margin: 190px auto 0 auto;
            width: 300px;
        }

        .tips {
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
        }

        .svg-container {
            padding: 6px 5px 6px 15px;
            color: $dark_gray;
            vertical-align: middle;
            width: 30px;
            display: inline-block;

            &_login {
                font-size: 20px;
            }
        }

        .title {
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            font-weight: bold;
        }

        .el-form-item {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            color: #454545;
        }

        .iconfont {
            font-size: 23px;
        }

        .show-pwd {
            position: absolute;
            right: 10px;
            top: 7px;
            font-size: 16px;
            color: $dark_gray;
            cursor: pointer;
            user-select: none;
        }

        .thirdparty-button {
            position: absolute;
            right: 35px;
            bottom: 28px;
        }
    }
</style>
